<script setup>
import {ref} from 'vue'
const sh = ref(false)
const goto10 = (url) => {
  sh.value = true
  uni.navigateTo({
    url: '/pages/index/index_spzxq'
  });
}
  const ch = ref(false)
  const goto11 = (url) =>{
    ch.value = true
    uni.navigateTo({
      url:'/pages/index/index_spbhxq'
    })
  }
</script>

<template>
  <view>
    <view class="zt1">
      <button class="bt1" @click="goto10('/pages/index/index_spzxq')">跳转</button>
      <view class="zd1">
        <text class="zb1">周</text>
      </view>
      <text class="zb11">打架斗殴</text>
      <text class="na">周斌</text>
      <text class="tj1">审批中</text>
      <text class="id1">突发事件类型</text>
      <text class="id2">是</text>
      <text class="id3">是否报送心理健康中心</text>
      <text class="id4">9</text>
      <text class="id5">涉及学生人数</text>
      <text class="id0">创建时间：2023.03.20 12：12：12</text>
      <view class="li1"></view>
      <view class="li2"></view>
      <view class="li3"></view>
      <view class="li4">
        <text class="id6">突发事件概述:</text>
        <text class="id7">打架斗殴打架斗殴打架斗殴打架斗殴</text>
      </view>
    </view>
    <view class="zt2">
      <button class="bt1" @click="goto11('/pages/index/index_spbhxq')">跳转</button>
      <view class="zd2">
        <text class="zb2">周</text>
      </view>
      <text class="zb11">打架斗殴</text>
      <text class="na">周斌</text>
      <text class="tj2">审批驳回</text>
      <text class="id1">突发事件类型</text>
      <text class="id2">是</text>
      <text class="id3">是否报送心理健康中心</text>
      <text class="id4">9</text>
      <text class="id5">涉及学生人数</text>
      <text class="id0">创建时间：2023.03.20 12：12：12</text>
      <view class="li1"></view>
      <view class="li2"></view>
      <view class="li3"></view>
      <view class="li4">
        <text class="id6">突发事件概述</text>
        <text class="id7">打架斗殴打架斗殴打架斗殴打架斗殴</text>
      </view>
    </view>
  </view>

</template>

<style>
body{
  background-color: gainsboro;
}
.bt1{
  position: absolute;
  background-color: firebrick;
  width: 340px;
  height: 213px;
  border-radius: 5px 5px 5px 5px;
  opacity: 0;
  z-index: 3;
}
.zt1{
  width: 340px;
  height: 213px;
  border-radius: 6px;
  right: 10px;
  top: 15px;
  position: absolute;
  background: #fff;
  box-shadow: 0 2px 4px #e6e6e64d;
}
.zd1{
  width: 45px;
  height: 45px;
  top: 15px;
  left: 15px;
  border-radius: 50%;
  background: #276eff;
  position: relative;
}
.zb1{
  position: relative;
  color: white;
  font-size: 25px;
  left: 10px;
  top: 2px;
}
.na{
  position: relative;
  left: 10px;
  top: -17px;
  font-size: 18px;
}
.tj1 {
  position: relative;
  color:blue;
  font-size: 13px;
  top: -20px;
  left: 170px;
}
.tj2 {
  position: relative;
  color:red;
  font-size: 13px;
  top: -20px;
  left: 170px;
}
.li1{
  position: relative;
  left: 5px;
  width:330px ;
  height: 2px;
  background-color: #f5f5f5;
}
.li2{
  position: relative;
  width: 2px;
  height: 30px;
  left: 110px;
  top: 15px;
  background-color: #f5f5f5;
}
.li3{
  position: relative;
  width: 2px;
  height: 30px;
  left: 220px;
  top: -15px;
  background-color: #f5f5f5;
}
.li4{
  position: absolute;
  background-color: #f5f5f5;
  top: 130px;
  left: 5px;
  border-radius: 6px;
  width: 330px;
  height: 50px;
}
.zb11{
  position: relative;
  color: #1a1a1a;
  font-size: 15px;
  left: 25px;
  top: 30px;
}
.id0{
  position: absolute;
  font-size: 11px;
  color: #999999;
  bottom: 10px;
  left: 10px;
}
.id1{
  position: relative;
  left: -112px;
  top: 50px;
  color: #999999;
  font-size: 11px;
}
.id2{
  position: relative;
  font-size: 15px;
  left: -45px;
  top: 30px;
}
.id3{
  position: absolute;
  color: #999999;
  font-size: 10px;
  left: 115px;
  top: 105px;
}
.id4{
  position: absolute;
  font-size: 15px;
  top: 80px;
  left: 275px;
}
.id5{
  position: absolute;
  font-size: 11px;
  color: #999999;
  top: 105px;
  left: 246px;
}
.id6{
  position: relative;
  font-size: 11px;
  color: #999999;
  left: 10px;
}
.id7{
  position: relative;
  font-size: 12px;
  left: -57px;
  top: 22px;
}
.zt2{
  width: 340px;
  height: 213px;
  border-radius: 6px;
  right: 10px;
  top: 243px;
  position: absolute;
  background: #fff;
  box-shadow: 0 2px 4px #e6e6e64d;
}
.zd2{
  width: 45px;
  height: 45px;
  top: 15px;
  left: 15px;
  border-radius: 50%;
  background: #276eff;
  position: relative;
}
.zb2{
  position: relative;
  color: white;
  font-size: 25px;
  left: 10px;
  top: 2px;
}
</style>